<!-- 费用卡片模块 -->
<?php
$pricingData = json_decode(file_get_contents(__DIR__ . '/../../datas/components/pricing.json'), true);
$paddingTop = $pricingData['styles']['padding']['top'];
$paddingBottom = $pricingData['styles']['padding']['bottom'];
$backgroundColor = $pricingData['styles']['backgroundColor'];
$content = $pricingData['content'];
?>

<section id="pricing" class="py-<?= $paddingTop ?> pb-<?= $paddingBottom ?> bg-<?= $backgroundColor === 'white' ? 'white' : 'light' ?>">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?= $content['sectionBadge'] ?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $content['sectionTitle'] ?>
      </h2>
      <p class="text-dark/70 mb-8">
        <?= $content['sectionSubtitle'] ?>
      </p>
      
      <!-- 计费方式切换 -->
      <?php if ($content['billingToggle']): ?>
      <div class="flex items-center justify-center space-x-4 mb-8">
        <span class="text-dark/70">月付</span>
        <div class="relative inline-block w-12 h-6">
          <input type="checkbox" id="billingToggle" class="opacity-0 w-0 h-0">
          <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full before:absolute before:content:'' before:h-5 before:w-5 before:left-0.5 before:bottom-0.5 before:bg-white before:rounded-full before:transition-all checked:bg-primary checked:before:translate-x-6"></span>
        </div>
        <span class="text-dark/70">年付 <span class="text-primary text-sm"><?= $content['discount'] ?></span></span>
      </div>
      <?php endif; ?>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <?php foreach ($content['plans'] as $plan): ?>
      <?php $isHighlighted = $plan['id'] === $content['highlightedPlan']; ?>
      <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-lg transition-custom <?= $isHighlighted ? 'shadow-lg transform scale-105 hover:shadow-xl' : '' ?> relative">
        <?php if ($isHighlighted): ?>
        <div class="absolute top-0 left-0 right-0 bg-primary text-white text-center py-2 font-medium">
          最受欢迎
        </div>
        <?php endif; ?>
        <div class="p-8 <?= $isHighlighted ? 'pt-12' : '' ?>">
          <h3 class="text-xl font-bold mb-2"><?= $plan['name'] ?></h3>
          <p class="text-dark/70 mb-6"><?= $plan['description'] ?></p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl font-bold text-dark">¥<?= $plan['price'] ?></span>
            <span class="text-dark/70 ml-2">/<?= $plan['period'] ?><?= isset($plan['periodSuffix']) ? $plan['periodSuffix'] : '' ?></span>
          </div>
          <a href="#contact" class="block w-full py-3 
            <?= $plan['ctaButton']['style'] === 'primary' ? 'bg-primary text-white hover:bg-primary/90' : 
                  ($plan['ctaButton']['style'] === 'accent' ? 'bg-accent text-white hover:bg-accent/90' : 
                  'bg-primary/10 text-primary hover:bg-primary/20') ?> 
            rounded-lg text-center font-medium transition-custom mb-8">
            <?= $plan['ctaButton']['text'] ?>
          </a>
          <ul class="space-y-3">
            <?php foreach ($plan['features'] as $feature): ?>
            <li class="flex items-start">
              <i class="fa fa-check text-primary mt-1 mr-3"></i>
              <span class="text-dark/70"><?= $feature ?></span>
            </li>
            <?php endforeach; ?>
          </ul>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>